<template>
  <div class="E_Shopping_Mall">

    <nav class="navbar">

      <div class="navbar-center">
        <h1>推荐好物</h1>
      </div>

      <div class="navbar-center">
      <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top">
        <el-tab-pane label="文物" name="first" ></el-tab-pane>
        <el-tab-pane label="名画" name="second"></el-tab-pane>
        <el-tab-pane label="旅游" name="third"></el-tab-pane>
        <el-tab-pane label="小众" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>

      <div class="navbar-right">
        <span>积分余额：{{ points }}</span>
      </div>
    </nav>
    <!--排列帖子-->

    <div class="container">
      <div class="column">
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl1" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl2" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl3" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog"></div>
        <div class="box medium" @click="showDialog"></div>
        <div class="box medium" @click="showDialog"></div>
      </div>
      <div class="column">
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl4" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl5" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl6" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium" @click="showDialog"></div>
        <div class="box medium" @click="showDialog"></div>
        <div class="box medium" @click="showDialog"></div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl7" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl8" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl9" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium"></div>
        <div class="box medium"></div>
        <div class="box medium"></div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl10" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl11" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl12" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium"></div>
        <div class="box medium"></div>
        <div class="box medium"></div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl13" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl14" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl15" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium"></div>
        <div class="box medium"></div>
        <div class="box medium"></div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl16" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl17" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button"> 
           <img :src="imageUrl18" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium"></div>
        <div class="box medium"></div>
        <div class="box medium"></div>
      </div>
    </div>
  </div>
</template>

<script>
import image1 from '@/assets/eshopping/painting.png'
import image2 from '@/assets/eshopping/photo/image2.png'
import image3 from '@/assets/eshopping/photo/image3.png'
import image4 from '@/assets/eshopping/photo/image4.png'
import image5 from '@/assets/eshopping/photo/image5.png'
import image6 from '@/assets/eshopping/photo/image6.png'
import image7 from '@/assets/eshopping/photo/image7.png'
import image8 from '@/assets/eshopping/photo/image8.png'
import image9 from '@/assets/eshopping/photo/image9.png'
import image10 from '@/assets/eshopping/photo/image10.png'
import image11 from '@/assets/eshopping/photo/image11.png'
import image12 from '@/assets/eshopping/photo/image12.png'
import image13 from '@/assets/eshopping/photo/image13.png'
import image14 from '@/assets/eshopping/photo/image14.png'
import image15 from '@/assets/eshopping/photo/image15.png'
import image16 from '@/assets/eshopping/photo/image16.png'
import image17 from '@/assets/eshopping/photo/image17.png'
import image18 from '@/assets/eshopping/photo/image1.png'

export default {
  name: 'UserInfo',
  data() {
    return {
      imageUrl1: image1, // 图片的URL
      imageUrl2: image2,
      imageUrl3: image3,
      imageUrl4: image4,
      imageUrl5: image5,
      imageUrl6: image6,
      imageUrl7: image7,
      imageUrl8: image8,
      imageUrl9: image9,
      imageUrl10: image10,
      imageUrl11: image11,
      imageUrl12: image12,
      imageUrl13: image13,
      imageUrl14: image14,
      imageUrl15: image15,
      imageUrl16: image16,
      imageUrl17: image17,
      imageUrl18: image18,
      points:1500
    }
  },
  methods: {
    showDialog(){
      this.$router.push('/comments-section');
    }
  }
}
</script>

<style scoped>
.image-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: inherit; /* 继承父元素的border-radius */
  overflow: hidden; /* 确保图片不会超出按钮范围 */
  padding: 0; /* 移除默认的padding */
  width: 100%;
  height: 100%;
}
.E_Shopping_Mall {
  display: flex;
  flex-direction: column;
  width: 85%;
}

.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.info h2 {
  margin: 0 0 10px 0;
}

.inline-group span {
  margin: 0 5px; /* Add some margin for better visual separation */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin-top: 15%;
  margin-right: 50px;
}

.navbar-left, .navbar-center, .navbar-right {
  display: flex;
  align-items: center;
  color:#5D5B59;
  font-family: "黑体", "SimHei", "Arial", sans-serif;
}

.navbar-left h1 {
  margin-left: 50px;
  font-size: 40px;
}

.navbar-center ul {
  list-style: none;
  padding: 0;
  display: flex;
  font-size: large;
}

.navbar-center ul li {
  margin-right: 20px;
}

.navbar-center ul li a {
  text-decoration: none;
  color: #343a40;
}

.navbar-right {
  font-size: 18px;
  background-color: #DDD9CF;
  border-radius: 17px;
  padding: 13px;
}

.custom-bg {
  background-color: #DDD9CF;
  padding: 5px;
  border-radius: 17px;
}

.custom-bg-not-choose{
  padding: 5px;
}

.container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 10px; /* 可选，为容器添加一些内边距 */
    height: 800px; /* 设置容器的高度 */
    overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
}

.column {
    flex: 1 0 10%; /* 调整为23%以考虑间隔 */
    margin-right: 2%; /* 列之间的间隔 */
    display: flex; /* 将列也设置为Flex容器 */
    flex-direction: column; /* 子元素垂直排列 */
}

.box {
    /* 通用样式 */
    border-radius: 36px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #D9D9D9;
    margin-bottom: 10px; /* 盒子之间的垂直间隔 */
    /* background-image: url("../../assets/eshopping/painting.png"); */
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;

}

.medium {
  height: 249px;
}

</style>